<template>
  <el-container class="height-100">
    <el-main class="height-100">
      <el-row class="height-100" type="flex" justify="center" align="middle">
        <el-col :span="8" class="login-box">
          <h3>登录</h3>
          <el-form
            :model="loginForm"
            :rules="rules"
            ref="loginForm"
            label-width="50px"
            class="demo-ruleForm"
          >
            <el-form-item label="账号" prop="name">
              <el-input v-model="loginForm.name"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="pwd">
              <el-input v-model="loginForm.pwd"></el-input>
            </el-form-item>

            <div>
              <el-button
                type="primary"
                style="width: 100%"
                @click="userLogin('loginForm')"
                >登录</el-button
              >
            </div>
          </el-form>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      loginForm: {
        name: "wenqingwu",
        pwd: "123456",
      },
      rules: {
        name: [
          { required: true, message: "请输入账号", trigger: "blur" },
          { min: 3, max: 10, message: "长度在 3 到 10个字符", trigger: "blur" },
        ],
        pwd: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 3, max: 10, message: "长度在 3 到 10个字符", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    // console.log(this.$router);
    // console.log(this.$route);
  },

  methods: {
    userLogin(formName) {
      // console.log(this.$refs); // 获取页面中所有绑定了ref属性的组件的集合。
      this.$refs[formName].validate((valid) => {
        // console.log(valid);
        if (valid) {
          // alert("submit!");
          this.$axios({
            url: this.url + "/user/login",
            method: "post",
            data: {
              username: this.loginForm.name,
              password: this.loginForm.pwd,
            },
          })
            .then((res) => {
              if (res.data.code === 0) {
                // this.$emit( "changeLogin", true )
                // console.log(this.$message);
                this.$message?.({
                  message: "登录成功",
                  type: "success",
                  duration: 500,
                });
                // setTimeout(() => {
                //   this.$emit("changeLogin", true);
                // }, 500);

                // 编程式导航：
                // this.$router.push( "/home" );
                // this.$router.push({ path: "/home" });
                this.$router.push({ name: "home" }); // 命名路由
              } else {
                // alert(res.data.msg);
                this.$message?.({
                  message: "登录失败",
                  type: "error",
                  duration: 1000,
                });
              }
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style>
.login-box {
  padding: 30px;
  border: 1px solid red;
  border-radius: 3px;
}
.login-box > h3 {
  border-bottom: 1px solid gray;
  text-align: center;
  margin-bottom: 30px;
}
</style>